<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<title>Campus Path</title>
</head>

<body>
<div id="container">
	<div id="header">
		<div id="links">
			<a href="javascript:showMap()"><img src="img/mapButton2_Spanish.png" alt="Map" id="MapBtn" /></a>
			<a href="javascript:showAbout()"><img src="img/aboutButton_Spanish.png" alt="About" id="AboutBtn" /></a>
			<a href="javascript:showFeedback()"><img src="img/feedbackButton_Spanish.png" alt="Feedback" id="FeedbackBtn" /></a>
		</div>
		
		<div id="logo">
			<img src="img/logo-cropped.png" alt="Campus Path">
		</div>
	</div>
	<div id="bar"></div>
	
	<div id="Main" class="Tabs">
		<div id="leftSide">
			<h2>Puntos de inicio y de destino</h2>
			Inicio: <input type="text" id="beginning" style="position:relative; left:9px"/> <br />
			Destino: <input type="text" id="ending" /> <br />

			<a href="list.html" onclick="window.open('list.html','popup','width=400,height=700,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=0'); return false">Ver Lista Completa de Edificios</a>
			<!--<a href="#" id="debug">(debugging)</a>-->

			<br />
			
			<h2>Opciones Avanzadas</h2>
			<input type="checkbox" id="grass"/> <label for="grass">Caminar Sobre el Césped</label><br />
			<input type="checkbox" id="parking"/> <label for="parking">Caminar a Través de Estacionamientos</label><br />
			<input type="checkbox" id="handicap" /> <label for="handicap">Accesible para Discapacitados</label><br />
			
			<h2>Velocidad</h2>
			<button onClick="changeSpeed(3)">Caminando</button>
			<button onClick="changeSpeed(10)">Bicicleta</button>
			<input type="text" id="speed" value="Enter Speed" onfocus="this.select();" onblur="changeSpeed(this.value);if(this.value=='')this.value='Enter Speed';" />
			(millas por hora)<br />
			
			<h2>Resultados</h2>
			<table>	
				<tr>			
					<td>
						<a href="#" onclick="javascript:generatePath(false);">
						<img src="img/generatePathButton2_Spanish.png" onmouseover="javascript:this.src='img/generatePathButton_Spanish.png';" onmouseout="javascript:this.src='img/generatePathButton2_Spanish.png';" />
						</a>
					</td>
					<td>
						Distancia: <input type="text" id="distance" value="" readonly /><br />
						Duración: <input type="text" id="duration" value="" readonly /><br /> <br />
						<div id="zoomButton">
			               <a href="#" onClick="javascript:toggleZoom();" ><img src="img/zoomIn.png" id="zoomImage" /></a>
		                </div>
					</td>
				</tr>
			</table>
			<hr />
			View the page in <a href="index.html">English</a>.
		</div>
		<div id="rightSide">
			<iframe src="map.html" id="mapIFrame" ></iframe>
		</div>	
	</div>
	
	<div id="About" class="Tabs hidden">
		<div id="AboutText">
		<h1>Descripción del proyecto</h1>
		<p>Campus Path es una aplicación web desarrollada para proveer a los estudiantes, profesores y visitantes de la University of North Texas (UNT) con rutas e información sobre el campus principal de UNT. Este software le permite al usuario tener acceso a diferentes rutas entre lugares específicos dentro del campus, junto con un tiempo estimado del recorrido que depende de la velocidad del usuario. Las rutas generadas por Campus Path son únicas en el sentido que toman en cuenta aceras, áreas con césped, rutas a través de edificios y las calles ordinarias. En un ambienta estudiantil esto es muy beneficioso ya que la mayoría de las rutas óptimas no usan las calles y mas bien usan aceras y "atajos" que no se pueden encontrar en los mapas regulares.</p>
		<h1>Equipo</h1>
            <p>Campus Path fue desarrollado por cuatro estudiantes como un projecto de un semestre para la clase CSCE
            4410 del Dr. Ryan Garlick, impartida en la Universida del Norte de Texas durante el semestre de otoño del 2012. Los estudiantes en las imágenes en la parte inferios son todos actuales estudiantes de pregrado con especialización en Ciencias de la Computación.</p>
		
		<div id="danielAsch" class="teamMember">
			Daniel Asch<img src="img/Daniel_photo.png" alt="Daniel Asch">
		</div>
		
		<div id="aaronBuchanan" class="teamMember">
			Aaron Buchanan<img src="img/Aaron_photo.png" alt="Aaron Buchanan">
		</div>
		
		<div id="natalieParde" class="teamMember">
			Natalie Parde<img src="img/Natalie_Photo.png" alt="Natalie Parde">
		</div>
		
		<div id="jakeStroud" class="teamMember">
			Jake Stroud<img src="img/Jake_Photo.png" alt="Jake Stroud">
		</div>
		</div>
	</div>					
	
	<div id="Feedback" class="Tabs hidden">
		<div id="FeedbackText">
		<h1>Realimentación</h1>
            <p>Si tienes alguna duda o comentarios sobre nuestra página nos puedes contactar al siguiente mail:
			<a href="mailto:CampusPathDevelopers@gmail.com">CampusPathDevelopers@gmail.com</a>.</p>
		</div>
	</div>
</div>
	
	<!-- pre-load all other tab images -->
	<img src="img/mapButton_Spanish.png" class="hidden" />
	<img src="img/aboutButton2_Spanish.png" class="hidden" />
	<img src="img/feedbackButton2_Spanish.png" class="hidden" />
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
	<script>
	
	//global variables
	var zoomSetting="zoomedOut";
	
	//search suggestions
	$(function() {
		var availableTags = [
			"Air Force ROTC",
			"ATH1",
			"Alumni Center",
			"ALUM",
			"Art Building",
			"ART",
			"Auditorium Building",
			"AUDB",
			"Bain Hall",
			"BAIN",
			"Bruce Hall",
			"BRUC",
			"Business Leadership Building",
			"BLB",
			"Campus Greens",
			"CGRN",
			"Chemistry Building",
			"CHEM",
			"Chestnut Hall",
			"CHNT",
			"Chilton Hall",
			"CHIL",
			"Clark Hall",
			"CLAR",
			"Coliseum",
			"COL",
			"College Inn",
			"CINN",
			"Crumley Hall",
			"CRUM",
			"Curry Hall",
			"CURY",
			"Eagle Student Services Center",
			"ESSC",
			"Environmental Education, Science & Technology Building",
			"ENV",
			"Environmental Science Greenhouse",
			"ESCG",
			"Facilities Complex",
			"CARP",
			"Fouts Field",
			"STAD",
			"Gateway Center",
			"GATE",
			"General Academic Building",
			"GAB",
			"Goolsby Chapel",
			"CHAP",
			"Hickory Hall",
			"HKRY",
			"Highland Street Parking Garage",
			"HIGH",
			"Honors Hall",
			"HNRS",
			"Hurley Administration Building",
			"ADMN",
			"Kan Bahnsen Gymnasium",
			"MGYM",
			"Kerr Hall",
			"KERR",
			"Language Building",
			"LANG",
			"Legends Hall",
			"LGNS",
			"Library Mall",
			"LMAL",
			"Life Sciences Complex",
			"LIFE",
			"Lyceum",
			"LYCM",
			"Maple Hall",
			"MAPL",
			"Marquis Hall",
			"MARQ",
			"Matthews Hall",
			"MATT",
			"McConnell Hall",
			"MCON",
			"Mozart Square Hall",
			"MOZA",
			"Murchison Performing Arts Center",
			"PAC",
			"Music Annex",
			"MUSA",
			"Music Building",
			"MUSI",
			"New Alumni Pavilion 2011",
			"APAV",
			"Performing Arts Annex",
			"PACX",
			"Physical Education Building",
			"PEB",
			"Physics Building",
			"PHYS",
			"Pohl Recreation Center",
			"RECS",
			"Radio, TV, Film & Performing Arts",
			"RTFP",
			"Residence Hall Association",
			"EDU1",
			"Sage Hall",
			"SAGE",
			"Santa Fe Square",
			"SFE",
			"Science Research Building",
			"SRB",
			"Scoular Hall",
			"SCOU",
			"Shrader Pavilion",
			"PAVF",
			"Stovall Hall",
			"STOV",
			"Sullivant Public Safety Center",
			"POLI",
			"Sycamore Hall",
			"SYMR",
			"Terrill Hall",
			"TH",
			"Track & Field Building",
			"ATH2",
			"Traditions Field",
			"TRDF",
			"Traditions Hall",
			"TRAD",
			"Union Circle Parking Garage",
			"UCPG",
			"University Service Building",
			"USB",
			"University Union",
			"UU",
			"West Hall",
			"WEST",
			"Willis Library",
			"LIBR",
			"Wooten Hall",
			"WH"
		];
		$( "#beginning" ).autocomplete({
			source:function(request, response)
			{
				var results = $.ui.autocomplete.filter(availableTags, request.term);
				response(results.slice(0, 7));
			},
			/*select:function(request, response)
			{
				moveStart();
			},*/
			change:function(request, response)
			{
				moveStart();
			}
		});
		$( "#ending" ).autocomplete({
			source:function(request, response)
			{
				var results = $.ui.autocomplete.filter(availableTags, request.term);
				response(results.slice(0, 7));
			},
			/*select:function(request, response)
			{
				moveEnd();
			},*/
			change:function(request, response)
			{
				moveEnd();
			}
		});
	});
	
	//moves start to designated building
	function moveStart()
	{
		var name=document.getElementById("beginning").value;
		processBuildingName(name,"start");
		
	}
	
	//moves end to designated building
	function moveEnd()
	{
		var name=document.getElementById("ending").value;
		processBuildingName(name,"end");
	}
	
	//clears the text from the specified textbox
	function clearTextbox(id)
	{
		if(id=="start")
		{
			document.getElementById("beginning").value='';
		}
		else if(id=="end")
		{
			document.getElementById("ending").value='';
		}
	}
	
	//gets the coordinates of a designated building
	function processBuildingName(input,whichArrow)
	{
		//ajax to get building's coordinates
		var xmlhttp;
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				//makes cursor "default" - not hourglass
				document.body.style.cursor='default';
				
				var response=xmlhttp.responseText.split('\n')[0];//remove 000webhost tracking code
				var result=eval('('+response+')');
				
				var isZoomedOut=(zoomSetting=="zoomedOut");
				
				//start
				if(whichArrow=="start")
				{
					document.getElementById("mapIFrame").contentWindow.customMoveStart(result.x,result.y,isZoomedOut);
					document.getElementById("beginning").value=result.name;
				}
				//end
				else
				{
					document.getElementById("mapIFrame").contentWindow.customMoveEnd(result.x,result.y,isZoomedOut);
					document.getElementById("ending").value=result.name;
				}
			}
		}
		
		//call getPoint.php with arguments
		xmlhttp.open("GET","scripts/getPoint.php?input="+input,true);
		xmlhttp.send();
		
		//"wait" cursor - hourglass
		document.body.style.cursor='wait';
	}
	
	//change speed (and duration, as it is a function of speed)
	function changeSpeed(speed)
	{
		//sets speed
		document.getElementById("speed").value=speed;
		
		//if distance has a value (i.e. path has been generated)
		if(document.getElementById("distance").value!="")
		{
			showDuration();
		}
	}
	
	//calculates and displays the duration
	function showDuration()
	{
		//get distance and speed
		var distance=parseFloat(document.getElementById("distance").value);
		var speed=document.getElementById("speed").value;
		
		//if speed is not a number
		if(isNaN(speed))
		{
			//alert("Please enter a valid speed.");
			speed=3;
			document.getElementById("speed").value=speed;
		}
		
		//calculate and display duration
		var duration=((distance/speed)*60);
		duration=duration.toFixed(2)+" minutes";
		document.getElementById("duration").value=duration;
	}
	
	//fetches and displays shortest path
	function generatePath(drawBigImage)
	{
		//get coordinates of start and end arrows
		var coordinates=document.getElementById("mapIFrame").contentWindow.getCoordinates();
		var startx=coordinates[0];
		var starty=coordinates[1];
		var endx=coordinates[2];
		var endy=coordinates[3];
		
		//get checkbox options
		var grass=document.getElementById('grass').checked?1:0;
		var parking=document.getElementById('parking').checked?1:0;
		var handicap=document.getElementById('handicap').checked?1:0;
		
		var xmlhttp;
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				//makes cursor "default" - not hourglass
				document.body.style.cursor='default';
				
				var response=xmlhttp.responseText.split('\n')[0];//remove 000webhost tracking code
				
				//max time reached
				if(response.charAt(0)!='{')
				{
					alert("Error: límite de tiempo excedido.");
					//we need to try to eliminate this from ever happening
					//by optimizing main.php so it never reaches the 10 second limit set for scripts for our host
				}
				else
				{
					var obj=eval('('+response+')');
					
					//if no error
					if(obj.distance>0)
					{
						//if for 600-width image
						if(!drawBigImage)
						{
							//set distance and show duration				
							var roundedDistance=obj.distance;
							roundedDistance=Math.round(parseFloat(roundedDistance)*100)/100;
							document.getElementById("distance").value=roundedDistance+" miles";
							showDuration();
							
							//show image with generated path
							document.getElementById("mapIFrame").contentWindow.changeImage(obj.imageURL);
						}
						//for 2500-width image
						else
						{
							//open window with 2500-width image
							window.open(obj.imageURL,'_blank');
						}
					}
					//error
					else
					{
						alert("Error: no existe ruta entre esos dos puntos.");
						//alert(response);//for debugging
					}
				}
			}
		}
		
		//call main.php with arguments
		var big=(drawBigImage)?"&big=1":"";
		var url="scripts/main.php?startx="+startx+"&starty="+starty+"&endx="+endx+"&endy="+endy+"&grass="+grass+"&parking="+parking+"&handicap="+handicap+big;
		xmlhttp.open("GET",url,true);
		//document.getElementById("debug").href=url;
		xmlhttp.send();
		
		//"wait" cursor - hourglass
		document.body.style.cursor='wait';
	}
	
	//toggles zoom of campus map
	function toggleZoom()
	{
		/*if (zoomSetting == "zoomedOut")
		{
			document.getElementById('mapIFrame').contentWindow.zoomIn();
			document.getElementById("zoomImage").src="img/zoomOut.png";
			zoomSetting="zoomedIn";
		}
		else
		{
			document.getElementById('mapIFrame').contentWindow.zoomOut();
			document.getElementById("zoomImage").src="img/zoomIn.png";
			zoomSetting="zoomedOut";
		}*/
		
		generatePath(true);
	}
	
	//
	//"change tab" functions
	//
	function showMap()
	{
		//content
		document.getElementById("Main").style.display="block";
		document.getElementById("About").style.display="none";
		document.getElementById("Feedback").style.display="none";
	 
		//buttons
		document.getElementById("MapBtn").src="img/mapButton2_Spanish.png";
		document.getElementById("AboutBtn").src="img/aboutButton_Spanish.png";
		document.getElementById("FeedbackBtn").src="img/feedbackButton_Spanish.png";
	}
	
	function showAbout()
	{
		//content
		document.getElementById("Main").style.display="none";
		document.getElementById("About").style.display="block";
		document.getElementById("Feedback").style.display="none";
	 
		//buttons
		document.getElementById("MapBtn").src="img/mapButton_Spanish.png";
		document.getElementById("AboutBtn").src="img/aboutButton2_Spanish.png";
		document.getElementById("FeedbackBtn").src="img/feedbackButton_Spanish.png";
	}
	
	function showFeedback()
	{
		//content
		document.getElementById("Main").style.display="none";
		document.getElementById("About").style.display="none";
		document.getElementById("Feedback").style.display="block";
	 
		//buttons
		document.getElementById("MapBtn").src="img/mapButton_Spanish.png";
		document.getElementById("AboutBtn").src="img/aboutButton_Spanish.png";
		document.getElementById("FeedbackBtn").src="img/feedbackButton2_Spanish.png";
	}
	
	</script>
</body>
</html>
